<!DOCTYPE HTML>
<html lang="zh-cn">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css ">
		<link rel="stylesheet" type="text/css" href="css/all.css">
		<link rel="stylesheet" type="text/css" href="css/cloud.css" />
		<link rel="stylesheet" href="css/reset.css">

		<link rel="stylesheet" href="css/player.css" media="screen" type="text/css" />
		<title>赫兹-听见你想听的声音</title>
		<meta charset="utf-8">
		<style type="text/css">

		</style>
	</head>

	<body>

		<!--
	作者：345349107@qq.com
	时间：2016-06-19
	描述：导航栏
-->
		<div class="menu">

			<nav class="navbar-default" role="navigation">
				<div class="container-fluid">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
							<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
						</button>

					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">
							<li>
								<a href="Main.html"><img border="0" src="img/Hz.png" width="46" height="23"></a>
							</li>
							<li><a href="Top.html">金曲排行</a></li>
							<li><a href="#">数据报表</a></li>

						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li><a href="#">注册</a></li>
							<li><a href="#">登录</a></li>
						</ul>
					</div>
					<!-- /.navbar-collapse -->
				</div>
				<!-- /.container-fluid -->
			</nav>
		</div>

		<!--
        	作者：345349107@qq.com
        	时间：2016-06-19
        	描述：页面中心
        -->
		<div style="position: relative;">
			<!--
            	作者：345349107@qq.com
            	时间：2016-06-19
            	描述：页面中心LOGO
            -->
            <div style="position: fixed;z-index: 2;left: 10%;">
            	<div class="logo">
            			<img src="img/logo.png" />
            			<img src="img/text.png" />
            	</div>
            
            	
            </div>
			
			
			
			<!--
            	作者：345349107@qq.com
            	时间：2016-06-19
            	描述：播放器
            -->
			<div style="position:fixed;z-index:2; left: 60%;">

				<script src="js/jquery.min.js"></script>
				<script src="js/jquery.jplayer.min.js"></script>
				<script src="js/jplayer.playlist.min.js"></script>

				<script src="js/index.js"></script>
				<div class="music-player">
					<!--<div style="background-image: url(http://i.imgur.com/yqB0erk.jpg);" class="album"></div>-->

					<div class="info">
						<div class="left">
							<a href="javascript:;" class="icon-shuffle"></a>
							<a href="javascript:;" class="icon-heart"></a>
						</div>
						<div class="center">
							<div class="jp-playlist">
								<ul>
									<li></li>
								</ul>
							</div>

						</div>
						<div class="right">
							<a href="javascript:;" class="icon-repeat"></a>
							<a href="javascript:;" class="icon-share"></a>
						</div>

						<div class="progress jp-seek-bar">
							<span class="jp-play-bar" style="width: 0%"></span>
						</div>
					</div>

					<div class="controls">
						<div class="current jp-current-time">00:00</div>
						<div class="play-controls">
							<a href="javascript:;" class="icon-previous jp-previous" title="previous"></a>
							<a href="javascript:;" class="icon-play jp-play" title="play"></a>
							<a href="javascript:;" class="icon-pause jp-pause" title="pause"></a>
							<a href="javascript:;" class="icon-next jp-next" title="next"></a>
						</div>
						<div class="volume-level jp-volume-bar">
							<span class="jp-volume-bar-value" style="width: 0%"></span>
							<a href="javascript:;" class="icon-volume-up jp-volume-max" title="max volume"></a>
							<a href="javascript:;" class="icon-volume-down jp-mute" title="mute"></a>
						</div>
					</div>

					<div id="jquery_jplayer" class="jp-jplayer"></div>

				</div>
			</div>

			<!--
        	作者：345349107@qq.com
        	时间：2016-06-19
        	描述：浮云效果
        -->

			<div class="cloud" style="position:absolute;z-index:1;top:0px;">

				<script type="text/javascript" src="assets/three.min.js"></script>
				<script type="text/javascript" src="assets/Detector.js"></script>
				<script id="vs" type="x-shader/x-vertex">

					varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); }

				</script>

				<script id="fs" type="x-shader/x-fragment">

					uniform sampler2D map; uniform vec3 fogColor; uniform float fogNear; uniform float fogFar; varying vec2 vUv; void main() { float depth = gl_FragCoord.z / gl_FragCoord.w; float fogFactor = smoothstep( fogNear, fogFar, depth ); gl_FragColor = texture2D(
					map, vUv ); gl_FragColor.w *= pow( gl_FragCoord.z, 20.0 ); gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor ); }

				</script>

				<script type="text/javascript">
					if (!Detector.webgl) Detector.addGetWebGLMessage();
					var container;
					var camera, scene, renderer;
					var mesh, geometry, material;
					var mouseX = 0,
						mouseY = 0;
					var start_time = Date.now();
					var windowHalfX = window.innerWidth / 2;
					var windowHalfY = window.innerHeight / 2;
					init();

					function init() {
						container = document.createElement('div');
						document.body.appendChild(container);
						// Bg gradient
						var canvas = document.createElement('canvas');
						canvas.width = 32;
						canvas.height = window.innerHeight;
						var context = canvas.getContext('2d');
						var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
						gradient.addColorStop(0, "#1e4877");
						gradient.addColorStop(0.5, "#4584b4");
						context.fillStyle = gradient;
						context.fillRect(0, 0, canvas.width, canvas.height);
						container.style.background = 'url(' + canvas.toDataURL('image/png') + ')';
						container.style.backgroundSize = '32px 100%';
						//
						camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 3000);
						camera.position.z = 6000;
						scene = new THREE.Scene();
						geometry = new THREE.Geometry();
						var texture = THREE.ImageUtils.loadTexture('img/cloud10.png', null, animate);
						texture.magFilter = THREE.LinearMipMapLinearFilter;
						texture.minFilter = THREE.LinearMipMapLinearFilter;
						var fog = new THREE.Fog(0x4584b4, -100, 3000);
						material = new THREE.ShaderMaterial({
							uniforms: {
								"map": {
									type: "t",
									value: texture
								},
								"fogColor": {
									type: "c",
									value: fog.color
								},
								"fogNear": {
									type: "f",
									value: fog.near
								},
								"fogFar": {
									type: "f",
									value: fog.far
								},
							},
							vertexShader: document.getElementById('vs').textContent,
							fragmentShader: document.getElementById('fs').textContent,
							depthWrite: false,
							depthTest: false,
							transparent: true
						});
						var plane = new THREE.Mesh(new THREE.PlaneGeometry(64, 64));
						for (var i = 0; i < 8000; i++) {
							plane.position.x = Math.random() * 1000 - 500;
							plane.position.y = -Math.random() * Math.random() * 200 - 15;
							plane.position.z = i;
							plane.rotation.z = Math.random() * Math.PI;
							plane.scale.x = plane.scale.y = Math.random() * Math.random() * 1.5 + 0.5;
							THREE.GeometryUtils.merge(geometry, plane);
						}
						mesh = new THREE.Mesh(geometry, material);
						scene.add(mesh);
						mesh = new THREE.Mesh(geometry, material);
						mesh.position.z = -8000;
						scene.add(mesh);
						renderer = new THREE.WebGLRenderer({
							antialias: false
						});
						renderer.setSize(window.innerWidth, window.innerHeight);
						container.appendChild(renderer.domElement);
						document.addEventListener('mousemove', onDocumentMouseMove, false);
						window.addEventListener('resize', onWindowResize, false);
					}

					function onDocumentMouseMove(event) {
						mouseX = (event.clientX - windowHalfX) * 0.25;
						mouseY = (event.clientY - windowHalfY) * 0.15;
					}

					function onWindowResize(event) {
						camera.aspect = window.innerWidth / window.innerHeight;
						camera.updateProjectionMatrix();
						renderer.setSize(window.innerWidth, window.innerHeight);
					}

					function animate() {
						requestAnimationFrame(animate);
						position = ((Date.now() - start_time) * 0.03) % 8000;
						camera.position.x += (mouseX - camera.position.x) * 0.01;
						camera.position.y += (-mouseY - camera.position.y) * 0.01;
						camera.position.z = -position + 8000;
						renderer.render(scene, camera);
					}
				</script>
			</div>

		</div>

		<!--
        	作者：345349107@qq.com
        	时间：2016-06-19
        	描述：页脚
        -->
		<div class="foot1"> <a href="#">关于我们 </a>

		</div>

	</body>

</html>